component.social

social-1

<div class="widget activity-line">
	<div class="widget-body padding-none">
		<div class="share">
			<textarea class="form-control" rows="3" placeholder="Share what you've been up to..."></textarea>
			<div class="share-buttons">
				<a href="#" class="glyphicons user"><i></i></span></a>
				<a href="#" class="glyphicons plus"><i></i></span></a>
				<a href="#" class="glyphicons envelope"><i></i></span></a>
				<a href="#" class="glyphicons-social facebook"><i></i></span></a>
				<a href="#" class="glyphicons-social twitter"><i></i></span></a>
			</div>	
			<a class="btn btn-primary  btn-sm pull-right">Submit</a>
		</div>
	</div>
</div>


Code

@import "http://localhost/shared/components/modules/admin/social/assets/less/social.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

social-2

Background Colored icon activity line
<div class="widget activity-line small">
	<div class="widget-body padding-none">
		<div class="icon primary"><a class="glyphicons luggage"><i></i></a></div>
		<span><a href="">Background Colored</a> icon activity line</span>
		<a class="activity-action pull-right glyphicons chat"><i></i></a>
	</div>
</div>

Code

@import "http://localhost/shared/components/modules/admin/social/assets/less/social.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

social-3

...
Adrian Demian posted on his Profile on 16 September 2013

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus ipsum
- mosaicpro December 12, 2011

Lorem ipsum dolor sit am ipsum
- mosaicpro December 12, 2011

<div class="widget activity-line">
	<div class="widget-body padding-none">
		<div class="activity-status border-bottom">
			<div class="activity-author"><a href="#"><img src="../assets/images/avatar-large.jpg" alt="..." width="50"></a></div>
			<div class="text">
				<a href="#">Adrian Demian</a> posted on 
				<a href="#">his Profile</a> 
				<span class="glyphicons calendar"><i></i> on 16 September 2013 </span>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="bg-gray border-bottom margin-none">	
			<p class="bg-gray innerAll margin-none"><i class="fa fa-2x fa-comments pull-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus ipsum<br/><small><em><abbr>- <a href="">mosaicpro </a> December 12, 2011</abbr></em></small></p>
		</div>
		<div class="bg-gray border-bottom margin-none">	
			<p class="bg-gray innerAll margin-none"><i class="fa fa-2x fa-comments pull-left"></i> Lorem ipsum dolor sit am ipsum<br/><small><em><abbr>- <a href="">mosaicpro </a> December 12, 2011</abbr></em></small></p>
		</div>
		<div class="innerAll">
			<input class="form-control input-sm" placeholder="Comment here..."/>
		</div>
		<div class="clearfix"></div>
	</div>
</div>

Code

@import "http://localhost/shared/components/modules/admin/social/assets/less/social.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

social-4

Combined Colors both for icon and text activity line
<div class="widget activity-line medium">
	<div class="widget-body padding-none">
		<div class="color-widget primary" >
			<div class="icon inverse"><a class="glyphicons envelope"><i></i></a></div>
			<span><a href="">Combined Colors</a> both for icon and text activity line</span>
			<a class="activity-action pull-right glyphicons chat"><i></i></a>
		</div>
	</div>
</div>

Code

@import "http://localhost/shared/components/modules/admin/social/assets/less/social.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

social-5

FOLLOW

Adrian Demian

<div class="widget activity-line">
	<div class="widget-body padding-none">
		<div class="row row-merge">

			<div class="col-md-3 ">
				<div class="color-widget dribble center">
					<span class="glyphicons-social dribbble social-big"><i></i></span>
				</div>				
			</div>
			<div class="col-md-9">
				<div class="innerAll muted">
					<a href="" class="pull-right"><div class="label label-primary"><em>FOLLOW</em></div></a>
					<a><h4 class="strong muted text-uppercase">Adrian Demian</h4></a>
					<ul class="fa-ul margin-bottom-none">
						<li><i class="fa fa-li fa-suitcase"></i> Working at <a href="http://www.mosaicpro.biz">MosaicPro</a></li>
						<li><i class="fa fa-li fa-certificate"></i> Adobe  Certification</li>
					</ul>
				</div>
			</div>

		</div>
	</div>
</div>

Code

@import "http://localhost/shared/components/modules/admin/social/assets/less/social.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

social-6

Follow us on twitter

<div class="widget activity-line">
	<div class="widget-body padding-none">
		<div class="color-widget inverse center">
			<span class="glyphicons-social twitter social-big"><i></i></span>
		</div>
		<p class="center innerAll">Follow us on <a href="#">twitter</a> </p>
	</div>
</div>

Code

@import "http://localhost/shared/components/modules/admin/social/assets/less/social.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

social-7

3 days ago
Adrian Demian
on FLAT PLUS Template

Make use of a super basic HTML template, or dive into a few examples we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.

<div class="widget widget-heading-simple widget-body-white">
	<div class="widget-body padding-none">
		
		<div class="innerAll border-bottom">
			<div class="pull-right label label-default"> <em>3 days ago</em></div>
			<h5 class="strong muted text-uppercase"><i class="fa fa-user "></i> Adrian Demian</h5>
			<span>on <a href="#">FLAT PLUS Template</a><span>
		</div>
		<div class="innerAll border-bottom">
			<p class="margin-none">Make use of a super basic HTML template, or dive into a few examples we've started for you. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
		</div>
		<div class="bg-inverse">
			<img data-src="holder.js/100%x200/dark" class="img-clean" />
		</div>
		<div class="border-bottom innerAll bg-gray">
			<a href="" class="text-primary"><i class="fa fa-comment"></i> Comment</a> &nbsp;
			<a href="" class="text-primary"><i class="fa fa-share"></i> Share Post</a>
		</div>
		
		<div class="innerAll">
			<ul class="list-group social-comments margin-none">
				<li class="list-group-item">
					<img src="../assets/images/avatar-36x36.jpg" alt="Avatar" class="pull-left" />
				 	<div class="user-info">
					 	<div class="row">
					 		<div class="col-md-3">
						 		<a href="">Adrian Demian</a> 
						 		<abbr>4 days ago</abbr>
						 	</div>
							<div class="col-md-9">
					 			<span> Wow... nice post</span>
					 	 	</div>
					 	 </div>
				 	</div>
				</li>
				<li class="list-group-item">
					<img src="../assets/images/avatar-36x36.jpg" alt="Avatar" class="pull-left">
					<div class="user-info">
						<div class="row">
						 	<div class="col-md-3">
							 	<a href="">Adrian Demian</a> 
							 	<abbr>4 days ago</abbr>
							</div>
							<div class="col-md-9">
						 		<span> Wow... nice post</span>
						 	</div>
						</div>
					</div>
				</li>
				<li class="list-group-item innerAll">
					<input type="text" name="message" class="form-control input-sm" placeholder="Comment here ..." />
				</li>
			</ul>
		</div>
	</div>
</div>



Code

@import "http://localhost/shared/components/modules/admin/social/assets/less/social.less";
@import "assets/components/core/less/widgets.less";
@import "assets/components/modules/admin/widgets/lists/list-group/assets/custom/less/list-group.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.

Scripts

BODY You should include the following scripts at the end of the HTML document, right before the closing </body> tag.

<script src="assets/components/plugins/holder/holder.js?v=v1.2.3"></script>

social-8

image
FOLLOW

Adrian Demian

<div class="widget widget-heading-simple widget-body-white">
	<div class="widget-body padding-none">
		<div class="row row-merge">
			<div class="col-md-3">
				<div class="innerAll center"><img src="../assets/images/avatar-large.jpg" alt="image" class="img-rounded img-responsive" /></div>
			</div>
			<div class="col-md-9">
				<div class="innerAll muted">
					<a href="" class="pull-right"><span class="label label-success"> <em>FOLLOW</em></span></a>
					<h4 class="strong muted text-uppercase">Adrian Demian</h4>
					<ul class="fa-ul margin-bottom-none">
						<li><i class="fa fa-li fa-suitcase"></i> Working at <a href="http://www.mosaicpro.biz">MosaicPro</a></li>
						<li><i class="fa fa-li fa-certificate"></i> Adobe  Certification</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>

Code

@import "http://localhost/shared/components/modules/admin/social/assets/less/social.less";
@import "assets/components/core/less/widgets.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.